<template>
    <view>
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">排班</block>
		</cu-custom>
        <view class="padding" v-if="list.length>0">
            <view class="bg-white padding radius-lg margin-bottom" v-for="item in list" :key="item.id">
                <view class="text-bold">{{item.start}} ~ {{item.end}}</view>
                <view class="list grid col-5 margin-top">
                    <view class="padding-xs" v-for="(matrix,index) in item.matrix" :key="index">
                        <view class="padding-sm radius-xl text-center"
                            :class="matrix.state == 0 ? 'china-btn-bg' : 'bg-gray'">
                            {{ matrix.time }}
                            <view class="text-xs" v-if="matrix.state == 0">预约</view>
                            <view class="text-xs" v-else-if="matrix.state == 2">已预约</view>
                            <view class="text-xs" v-else-if="matrix.state == 1">无</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
		<view class="flex flex-direction justify-center" v-else>
			<emptyData type="notOrder" text="暂无排班"></emptyData>
		</view>
			
        <view class="padding margin-top-lg" v-if="$utils.$auth.user('scheduling')">
            <view class="flex flex-direction">
                <button class="cu-btn china-btn-bg lg round cuIcon-add" @click="$utils.$page.open('/technician/pages/user/scheduling/save',true)">调整排班</button>
            </view>
        </view>
		<loading v-if="pageLoading" />
    </view>
</template>
<script>
export default {
    data(){
        return {
            pageLoading:false,
            list:[]
        }
    },
    onLoad() {
        this.getList();
    },
    methods:{
        getList(){
            this.pageLoading=true;
            this.list=[];
            this.$utils.$api.TechnicianScheduling.index().then(data=>{
                for (let i = 0; i < data.length; i++) {
                    const item = data[i];
                    item.start_date=new Date(item.start_time.replace(/-/g,'/'));
                    item.end_date=new Date(item.end_time.replace(/-/g,'/'));
                    item.start=`${this.getDayName(item.start_date)} ${item.start_date.getHours().toString().padStart(2, '0')}:${item.start_date.getMinutes().toString().padStart(2, '0')}`;
                    item.end=`${this.getDayName(item.end_date)} ${item.end_date.getHours().toString().padStart(2, '0')}:${item.end_date.getMinutes().toString().padStart(2, '0')}`;
                    for (let j = 0; j < item.matrix.length; j++) {
                        const matrix = item.matrix[j];
						matrix.date = new Date(matrix.start_time.replace(/-/g, '/'));
                        matrix.time = matrix.date.getHours().toString().padStart(2, '0') + ':' + matrix.date.getMinutes().toString().padStart(2, '0');
                        item.matrix[j]=matrix
                    }
                    this.list.push(item);
                }
            }).catch(()=>{}).finally(()=>{
                this.pageLoading=false
            })
        }
    }
}
</script>
<style lang="scss" scoped>
</style>